<template>
  <div style="background-color: #f7f8fa; padding: 5px 10px;">
    <van-row type="flex" style="background-color: #fff; border-radius:20px;padding:5px 0;">
      <van-col span="2" offset="1">
        <van-image :src="userimage" round width="30px" height="30px"></van-image>
      </van-col>
      <van-col span="20">
        <van-row type="flex" align="center" justify="space-between" style="padding-top:5px">
          <van-col>
            <van-row>
              <van-col>
                <strong>{{nickname}}</strong>
              </van-col>
              <van-col style="padding:0 5px" v-if="comment.parent">回复</van-col>
              <van-col v-if="comment.parent">
                <strong>{{comment.parentnickname}}</strong>
              </van-col>
            </van-row>
          </van-col>
          <van-col>{{comment.time}}</van-col>
        </van-row>
        <p>{{comment.content}}</p>
        <van-row type="flex" align="center" justify="left">
          <van-col span="6" style="text-align:left" v-if="comment.commentcount>0">查看{{comment.commentcount}}条回复</van-col>
          <van-col span="3" offset="12">
            <van-row type="flex" align="center" justify="end" class="comment-like" @click="addlike">
              <van-col>{{comment.likecount}}</van-col>
              <van-col>
                <van-icon name="good-job" size="20" color="#1989FA" v-if="islike"/>
                <van-icon name="good-job-o" size="20"  v-else/>
              </van-col>
            </van-row>
          </van-col>
          <van-col offset="1" @click="opencommentpopup">
            <van-icon name="ellipsis" size="20" />
          </van-col>
        </van-row>
      </van-col>
    </van-row>
    <van-popup
      v-model="bottom_popup"
      position="bottom"
      :overlay-style="{'background-color':'rgba(0,0,0,0)'}"
      :style="{ width: '100%'}"
    >
      <van-row type="flex" justify="space-between" align="center">
        <van-col span="18">
          <van-field
            type="textarea"
            rows="1"
            id="comment"
            :autosize="{ maxHeight: 75, minHeight: 10 }"
            v-model="commenttext"
            placeholder="评论"
          />
        </van-col>
        <van-col span="2">
          <van-icon name="smile-o" size="22" />
        </van-col>
        <van-col span="4">
          <van-button
            :disabled="commenttext===''"
            type="primary"
            size="small"
            @click="sendcomment"
          >发送</van-button>
        </van-col>
      </van-row>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'commentCard',
  props: ['comment'],
  data() {
    return {
      bottom_popup: false,
      commenttext: '',
      userimage: '',
      username: '',
      nickname: '',
      islike: false
    }
  },
  mounted() {
    this.$http
      .get('/account/userimage', { params: { user: this.comment.user } })
      .then(res => {
        if (res.data.status === 200) {
          this.nickname = res.data.nickname
          this.userimage = res.data.userimage
        }
      })
      .catch(res => {})
    this.$http
      .get('/islike', { params: { comment_id: this.comment.id } })
      .then(res => {
        if (res.data.status == 200) {
          this.islike = res.data.islike
        }
      })
      .catch(res => {})
  },
  methods: {
    addlike() {
      if (this.islike) {
        this.$http
          .get('/like/comment', {
            params: { comment_id: this.comment.id, action: 0 }
          })
          .then(res => {
            if (res.data.status === 200) {
              this.islike = false
              this.comment.likecount-=1
            }
          })
          .catch(res => {})
      } else {
        this.$http
          .get('/like/comment', {
            params: { comment_id: this.comment.id, action: 1 }
          })
          .then(res => {
            if (res.data.status === 200) {
              this.comment.likecount+=1
              this.islike = true
            }
          })
          .catch(res => {})
      }
    },
    opencommentpopup() {
      this.bottom_popup = true
      setTimeout(function() {
        document.getElementById('comment').focus()
      }, 200)
    },
    sendcomment() {}
  }
}
</script>

<style scoped>
p {
  width: 96%;
  text-align: left;
}
</style>